<template>
  <div class="login" style="width: 100%;height: 100vh;background-color: burlywood;overflow:hidden;  ">
    <div style="box-shadow: 2px 0 6px rgb(72, 93, 153); width: 400px;margin: 150px auto;height: 400px">

      <div style="font-size: 30px;color: aliceblue;text-align: center;padding: 30px 0">
        欢迎登录
      </div>

      <el-form ref="form" style="margin: 20px 10px" :model="form"  size="default" :rules="rules">
        <el-form-item prop="username" >
          <el-input :prefix-icon="Avatar" prefix-icon="el-icon-user-solid" v-model="form.userName" ></el-input>
        </el-form-item>
        <el-form-item prop="password" >
          <el-input :prefix-icon="Lock" v-model="form.password" show-password ></el-input>
        </el-form-item>
        <el-form-item >
          <div style="display: flex;height: 30px" >
            <el-input :prefix-icon="Key" v-model="form.validCode" style="width: 50%;height: 100%;margin-right: 10px" placeholder="请输入验证码" ></el-input>
            <ValidCode ref="child" class="validcode" @sendData="getCode"/>
          </div>
        </el-form-item>
        <el-form-item >
          <el-button  style="width: 100%;" type="primary" @click="login">登 录</el-button>
        </el-form-item>
        <el-form-item >
          <el-button  style="width: 100%;" type="primary" @click="toRegister">注册</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { Avatar, Lock,Key } from "@element-plus/icons-vue"

import ValidCode from "@/components/ValidCode";
import {ElMessage} from "element-plus";
export default {
  components: {ValidCode},
  setup(){
    return{
      Avatar,
      Lock,
      Key
    }
  },
  name: "Login",
  data(){
    return {
      validCode:"",
      form:{},
      rules:{
        userName:[
          {required:true,message:"请输入用户名",trigger:"blur"},
        ],
        password:[
          {required:true,message:"请输入密码",trigger:"blur"}
        ]
      }
    }
  },

  methods:{
    RefreshCode(){
      this.$refs.child.refreshCode();
    },
    getCode(data){
      this.validCode = data;//在data中定义一个 validCode:'',用来记录验证码。
    },
    toRegister(){
      this.$router.push("/register")
    },
    login(){
      this.$refs['form'].validate((valid) =>{
        if (valid){
          if(!this.form.validCode){
            this.$message.error("请填写验证码")
            return;
          }
          if(this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()){
            this.$message.error("验证码填写错误");
            this.RefreshCode();
            this.form.validCode = "";
            return
          }

          request.post("/user/login",this.form).then(res =>{
            // console.log(res)
            if (res.code === 200){
              localStorage.setItem("user",JSON.stringify(res.data))

              ElMessage({
                message: '登录成功,欢迎'+res.data.nickName,
                type: 'success',
              })

              this.$router.push("/");//登录成功后的页面跳转
            }else {
              ElMessage({
                message: '用户名或密码错误',
                type: 'error',
              }),
              this.RefreshCode();
              this.form.validCode = "";
            }

          })
        }else{
          return false;
        }
      })

    }
  }
}

</script>

<style scoped>
.validcode{
  background-color: whitesmoke;
  height: 30px;
}
.login{
  background: url('~@/assets/image/bg.jpg') no-repeat center center;
}
</style>